<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>二级页面<span id="span"></span></h2>
    <script>
        window.onmessage = function (e) {
            // 添加来源验证
            if (e.origin === 'http://127.0.0.1:8080' || e.origin === 'http://localhost:8080') {
                console.log(`接收到来自${e.origin}的消息，数据类型:`, typeof e.data);
                console.log('原始数据内容:', e.data);
                try {
                    let obj;
                    // 根据数据类型采取不同的处理方式
                    if (typeof e.data === 'string') {
                        // 检查是否已经是JSON字符串
                        if (e.data.startsWith('{') && e.data.endsWith('}') ||
                            e.data.startsWith('[') && e.data.endsWith(']')) {
                            // 尝试解析JSON字符串
                            obj = JSON.parse(e.data);
                        } else if (e.data === '[object Object]') {
                            // 特殊处理：这是一个对象的字符串表示
                            console.error('收到了对象的字符串表示，而不是有效的JSON');
                            // 可以设置一个默认对象作为备选
                            obj = { name: '未知', age: 0 };
                        } else {
                            // 不是JSON，直接使用原始字符串
                            obj = { message: e.data };
                            console.log('收到的是非JSON字符串消息');
                        }
                    } else {
                        // 如果不是字符串，直接使用（现代浏览器可能直接传递对象）
                        obj = e.data;
                        console.log('直接收到了对象数据');
                    }

                    // 显示数据
                    let span = document.getElementById('span')
                    if (obj.name && obj.age) {
                        span.innerHTML = `${obj.name}${obj.age}`
                    } else {
                        span.innerHTML = JSON.stringify(obj);
                    }

                    // 回复消息
                    setTimeout(() => {
                        e.source.postMessage('我是二级页面，我收到了消息', e.origin)
                    }, 2000)

                } catch (error) {
                    console.error('处理数据失败:', error);
                    // 显示错误信息
                    document.getElementById('span').innerHTML = '数据解析错误';
                }
            } else {
                console.warn('拒绝接收未知来源的消息:', e.origin);
            }
        }
    </script>

</body>

</html>